<template>
  <el-cascader popper-class="ad-city-multi-select" clearable filterable collapse-tags
               v-model="codes"
               :options="$attrs.cityData"
               :props="{ label: 'name', value: 'code', children: 'cityList', multiple: true, expandTrigger:'hover' }"
               @change="change"
  />
</template>

<script>
export default {
  data() {
    return {
      codes: []
    }
  },
  watch: {
    '$attrs.value': {
      immediate: true,
      deep: true,
      handler(codes) {
        if (codes && codes.length > 0) {
          const res = []
          this.$attrs.cityData.forEach(province => {
            codes.forEach(code => {
              province.cityList.forEach(city => {
                if (city.code == code) {
                  res.push([province.code, city.code])
                }
              })
            })
          })
          this.codes = res
        } else {
          this.codes = []
        }
      }
    }
  },
  methods: {
    change(rawCodes) {
      const codes = rawCodes.map(codes => codes[codes.length - 1])
      this.$emit('input', codes)
      this.$emit('select', codes)
    }
  }
}
</script>

<style lang="scss">
.ad-city-multi-select {
  .el-cascader-panel { height: 300px; }
  .el-cascader__search-input { line-height: 1; }}
</style>